<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookshelf - 高品质书架与阅读空间</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind -->

    
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="index.css">
</head>
<body class="bg-light text-accent antialiased theme-transition" id ="app-body">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white/90 dark:bg-dark-card backdrop-blur-sm shadow-md z-50 transition-all duration-300 theme-transition" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 dark:text-dark-text">
            <div class="flex justify-between items-center py-4">
                <!-- Logo -->
                 <a href="#" class="flex item-center dark:text-dark-text space-x-2">
                    <i class="fa fa-book text-primary text-2xl theme-transition"></i>
                    <span class="text-lg font-bold">Bookshelf</span>
                 </a>
                 <!-- 桌面端导航菜单 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">首页</a>
                    <a href="#products" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">产品</a>
                    <a href="#cases" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">案例</a>
                    <a href="#about" class="text-accent hover:text-primary font-medium transition-custom theme-transition dark:text-dark-text">关于</a>
                    <button class="bg-primary text-accent hover:bg-primary/90 hover:shadow-md shadow-md px-4 py-2 rounded-md hover:bg-primary-dark theme-transition dark:text-dark-text">
                        加入我们
                    </button>
                    <!-- 黑夜模式切换按钮 -->
                    <button id="theme-toggle" class="text-accent hover:text-primary font-medium transition-custom theme-transition">
                        <i class="fa fa-moon-o text-accent  dark:text-dark-text theme-transition"></i>
                    </button>
                </nav>
                <!-- 移动端菜单按钮和主题切换 -->
                <div class="flex items-center md:hidden gap-4">
                    <button id="mobile-theme-toggle">
                        <i class="fa fa-moon-o text-accent dark:text-dark-text theme-transition"></i>
                    </button>
                    <button class="text-accent text-2xl dark:text-dark-text theme-transition" id="menu-toggle">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 移动端导航菜单 -->
        <div class="md:hidden bg-white dark:bg-dark-card hidden shadow-md absolute w-full theme-transition" id="mobile-menu">
            <div class="flex flex-col items-center justify-center gap-4 py-8">
                <a href="#" class="text-accent hover:text-primary dark:text-dark-text font-medium transition-custom theme-transition">首页</a>
                <a href="#products" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">产品</a>
                <a href="#cases" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">案例</a>
                <a href="#about" class="text-accent dark:text-dark-text hover:text-primary font-medium transition-custom theme-transition">关于</a>
                <button class="bg-primary text-white dark:text-dark-text hover:bg-primary/90 hover:shadow-md shadow-md px-4 py-2 rounded-md hover:bg-primary-dark theme-transition">
                    加入我们
                </button>
            </div>
        </div>
    </header>

     <!-- 英雄区域 -->
     <section class="relative h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/1070/1920/1080" alt="精美的书架展示" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-accent/40 dark:bg-black/60 theme-transition"></div>
        </div>
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
            <h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold text-white mb-6 text-shadow leading-tight">
                打造你的理想阅读空间
            </h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 max-w-2xl mx-auto mb-10 text-shadow">
                精选高品质书架，为你的书籍找到完美归宿，让阅读成为生活中最美的享受
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <button class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-md transition-custom shadow-lg hover:shadow-xl text-lg font-medium">
                    探索产品系列
                </button>
                <button class="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white border border-white/40 px-8 py-3 rounded-md transition-custom shadow-lg hover:shadow-xl text-lg font-medium">
                    查看设计案例
                </button>

            </div>
        </div>
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
            <i class="fa fa-angle-down text-3xl"></i>
        </div>
    </section>
    <!-- 产品展示区 -->
    <section id="products" class="py-20 bg-white dark:bg-dark-bg theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-accent dark:text-dark-text mb-4 theme-transition">
                    精选书架系列
                </h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto theme-transition">
                    我们的书架系列精心设计，符合不同阅读习惯和空间需求，为您的阅读提供完美的解决方案
                </p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 产品卡片 -->
                <div class="bg-light dark:bg-dark-card rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-custom group theme-transition">
                    <div class="relative overflow-hidden h-64">
                        <img src="https://picsum.photos/id/1071/300/200" alt="产品图片" class="w-full h-full object-cover rounded-md mb-4">
                        <div class="absolute top-4 right-4 bg-primary text-white text-sm font-medium px-3 py-1 rounded-full">
                            热销
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2 text-accent dark:text-dark-text theme-transition">现代简约书架</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4 theme-transition">简约设计，最大化利用空间，适合现代家居风格</p>
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-xl theme-transition dark:text-dark-text">¥1,299</span>
                            <button class="bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md dark:text-dark-text transition-custom theme-transition">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 产品卡片2 -->
                <div class="bg-light dark:bg-dark-card rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-custom group theme-transition">
                    <div class="relative overflow-hidden h-64">
                        <img src="https://picsum.photos/id/1072/300/200" alt="产品图片" class="w-full h-full object-cover rounded-md mb-4"></img>
                        
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2 text-accent dark:text-dark-text theme-transition">复古实木书架</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4 theme-transition">精选实木打造，复古风格，彰显品质生活</p>
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-xl theme-transition dark:text-dark-text">¥2,499</span>
                            <button class="bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md dark:text-dark-text transition-custom theme-transition">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>



                <!-- 产品卡片3 -->
                <div class="bg-light dark:bg-dark-card rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-custom group theme-transition">
                    <div class="relative overflow-hidden h-64">
                        <img src="https://picsum.photos/id/1073/300/200" alt="产品图片" class="w-full h-full object-cover rounded-md mb-4"></img>
                        <div class="absolute top-4 right-4 bg-primary text-white text-sm font-medium px-3 py-1 rounded-full">
                            新品
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2 text-accent dark:text-dark-text theme-transition">转角组合书架</h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4 theme-transition">灵活组合，充分利用角落空间，功能性强</p>
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-xl theme-transition dark:text-dark-text">¥1,899</span>
                            <button class="bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-md  dark:text-dark-text transition-custom theme-transition">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>



            </div>
            <div class="text-center mt-12">
                <button class="border-2 border-primary bg-white dark:bg-dark-card dark:text-dark-text text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-md font-medium transition-custom theme-transition">
                    查看更多
                </button>
            </div>
        </div>

    </section>

    <!-- 设计案例 -->
    <section id="cases" class="py-20 bg-gray-50 dark:bg-dark-bg/80 theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-accent dark:text-dark-text mb-4 theme-transition">精选设计案例</h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto theme-transition">我们的书架如何融入不同的家居风格，创造独特的阅读空间</p>
            </div>

            <div class="grid grid-cols-1  lg:grid-cols-2 gap-8">
                <!-- 案例1 -->
                 <div class="bg-white dark:bg-dark-card rounded-lg overflow-hidden showdow-md hover:shadow-xl transition-custom theme-transition">
                    <img src="https://picsum.photos/id/1074/300/200" alt="案例图片" class="w-full h-80 object-cover rounded-md mb-4">
                    <div class="p-6"> 
                        <h3 class="text-xl font-semibold mb-2 text-accent dark:text-dark-text theme-transition">
                            现代客厅书房一体化设计
                        </h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4 theme-transition">
                            将书架融入客厅设计，打造开放式阅读空间，既实用又美观，成为空间的视觉焦点。
                        </p>
                        <a href="#" class="text-primary dark:text-dark-text hover:text-primary/80 font-medium inline-flex transition-custom theme-transition">
                            了解更多 <i class="fa fa-angle-right ml-2 py-1 px-2"></i>
                        </a>
                    </div>
                 </div>

                 <!-- 案例2 -->
                 <div class="bg-white dark:bg-dark-card rounded-lg overflow-hidden showdow-md hover:shadow-xl transition-custom theme-transition">
                    <img src="https://picsum.photos/id/1075/300/200" alt="案例图片" class="w-full h-80 object-cover rounded-md mb-4"></img>
                    <div class="p-6"> 
                        <h3 class="text-xl font-semibold mb-2 text-accent dark:text-dark-text theme-transition">
                            现代客厅书房一体化设计
                        </h3>
                        <p class="text-gray-600 dark:text-gray-300 mb-4 theme-transition">
                            将书架融入客厅设计，打造开放式阅读空间，既实用又美观，成为空间的视觉焦点。
                        </p>
                        <a href="#" class="text-primary dark:text-dark-text hover:text-primary/80 font-medium inline-flex transition-custom theme-transition">
                            了解更多 <i class="fa fa-angle-right ml-2 py-1 px-2"></i>
                        </a>
                    </div>
                 </div>
            </div>
        </div>
     </section>

     <!-- 关于我们 -->
      <section id="about" class="py-20 bg-white dark:bg-dark-bg theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row item-center gap-12">
                <div class="lg:w-1/2">
                    <img src="https://picsum.photos/id/1076/300/200" alt="关于我们" class="w-full h-auto rounded-ld shadow-lg">
                </div>
                <div class="lg:w-1/2">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-accent dark:text-dark-text mb-6 theme-transition">
                        关于 Bookshelf
                    </h2>
                    <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg theme-transition">
                        我们致力于为书迷打造高品质的书架产品，每一款产品都经过精心设计和制作，兼顾美观与实用。
                    </p>
                    <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg theme-transition">
                        自2010年成立以来，我们坚持使用优质材料，注重环保理念，将每一件产品都视为艺术品来打造。
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
                         <!-- 列表项1 -->
                        <div class="flex items-start">
                            <div class="bg-primary/10 dark:bg-primary/20 rounded-full mr-4 theme-transition">
                                <i class="fa fa-leaf text-primary text-xl theme-transition"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-accent text-lg mb-1 dark:text-dark-text theme-transition">
                                    环保材料
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                    选用可持续发展的优质木材
                                </p>
                            </div>
                        </div>

                         <!-- 列表项2 -->
                         <div class="flex items-start">
                            <div class="bg-primary/10 dark:bg-primary/20 rounded-full mr-4 theme-transition">
                                <i class="fa fa-check text-primary text-xl theme-transition"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-accent text-lg mb-1 dark:text-dark-text theme-transition">
                                    品质保证
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                    严格的质量控制体系
                                </p>
                            </div>
                        </div>

                         <!-- 列表项3 -->
                         <div class="flex items-start">
                            <div class="bg-primary/10 dark:bg-primary/20 rounded-full mr-4 theme-transition">
                                <i class="fa fa-leaf text-primary text-xl theme-transition"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-accent text-lg mb-1 dark:text-dark-text theme-transition">
                                    原创设计
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                    专业设计师团队精心打造
                                </p>
                            </div>
                        </div>

                          <!-- 列表项4 -->
                          <div class="flex items-start">
                            <div class="bg-primary/10 dark:bg-primary/20 rounded-full mr-4 theme-transition">
                                <i class="fa fa-check text-primary text-xl theme-transition"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-accent text-lg mb-1 dark:text-dark-text theme-transition">
                                    免费配送
                                </h3>
                                <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                    全国范围内免费配送安装
                                </p>
                            </div>
                        </div>
                    </div>

                    <button class="bg-primary hover:bg-primary/80 text-white px-6 py-2 rounded-md transition-colors theme-transition">
                        了解更多我们的故事
                    </button>
                </div>
            </div>
        </div>
      </section>

    <!-- 客户评价 -->
    <section class="py-20 bg-light dark:bg-dark-bg theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-accent dark:text-dark-text mb-4 theme-transition">
                    客户的声音
                </h2>
                <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto theme-transition">
                    听听我们的客户如何评价Bookshelf的产品和服务
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 评价项1 -->
                 <div class="bg-white dark:bg-dark-card p-8 rounded-lg shadow-md hover:shadow-xl transition-custom theme-transition">
                    <!-- 评分 -->
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6 italic theme-transition">
                        "书架质量非常好，安装简单，设计简约大方，完美融入我的客厅风格。客服也很耐心解答我的问题。"
                    </p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1027/100/100" alt="客户头像" class="w-10 h-10 rounded-full mr-4 theme-transition"></img>
                        <div>
                            <p class="font-semibold text-accent dark:text-dark-text theme-transition">
                                李女士
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                购买了现代简约书架
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                2023年5月
                            </p>
                        </div>
                    </div>
                 </div>


                <!-- 评价项2 -->
                <div class="bg-white dark:bg-dark-card p-8 rounded-lg shadow-md hover:shadow-xl transition-custom theme-transition">
                    <!-- 评分 -->
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6 italic theme-transition">
                        "实木书架质感极佳，散发着天然木材的香气，做工精细，细节处理得很到位。非常值得购买的一款产品。"
                    </p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1012/100/100" alt="客户头像" class="w-10 h-10 rounded-full mr-4 theme-transition"></img>
                        <div>
                            <p class="font-semibold text-accent dark:text-dark-text theme-transition">
                                王先生
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                购买了复古实木书架
                            </p>
                            <p class="text-gray-600 dark:text-gray-300 theme-transition">
                                2023年6月
                            </p>
                        </div>
                    </div>
                </div>


                <!-- 评价3 -->
                <div class="bg-white dark:bg-dark-card p-8 rounded-lg shadow-md hover:shadow-xl transition-custom theme-transition">
                    <div class="text-yellow-400 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mb-6 italic theme-transition">"转角书架完美解决了我家角落空间浪费的问题，设计巧妙，可以放很多书，而且很稳固。安装师傅也很专业。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/id/1005/100/100" alt="客户头像" class="w-10 h-10 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold text-accent dark:text-dark-text theme-transition">张女士</h4>
                            <p class="text-gray-600 dark:text-gray-300 text-sm theme-transition">购买了转角组合书架</p>
                            <p class="text-gray-600 dark:text-gray-300 text-sm theme-transition">2023年7月</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </section>
     <!-- 联系我们 -->
    <section id="contact" class="py-20 bg-white dark:bg-dark-bg theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-accent dark:text-dark-text theme-transition">联系我们</h2>
                    <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto theme-transition">如果您有任何问题或建议，请随时联系我们。我们期待与您合作。</p>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                <div>
                    <form class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-gray-700 dark:text-gray-300 font-medium mb-2 theme-transition">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card text-accent dark:text-dark-text rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom theme-transition" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="phone" class="block text-gray-700 dark:text-gray-300 font-medium mb-2 theme-transition">电话</label>
                                <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card text-accent dark:text-dark-text rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom theme-transition" placeholder="请输入您的电话">
                            </div>
                        </div>
                        <div>
                            <label for="email" class="block text-gray-700 dark:text-gray-300 font-medium mb-2 theme-transition">邮箱</label>
                            <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card text-accent dark:text-dark-text rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom theme-transition" placeholder="请输入您的邮箱">
                        </div>
                        <div>
                            <label for="message" class="block text-gray-700 dark:text-gray-300 font-medium mb-2 theme-transition">留言</label>
                            <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card text-accent dark:text-dark-text rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-custom theme-transition" placeholder="请输入您的留言内容"></textarea>
                        </div>
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-md transition-custom shadow-md hover:shadow-lg font-medium theme-transition">
                            提交留言
                        </button>
                    </form>
                </div>
                    <div class="flex flex-col justify-between">
                        <div>
                            <h3 class="text-xl font-semibold mb-6 text-accent dark:text-dark-text theme-transition">联系方式</h3>
                            <div class="space-y-4 mb-8">
                                <div class="flex items-start">
                                    <div class="bg-primary/10 dark:bg-primary/20 p-3 rounded-full mr-4 theme-transition">
                                        <i class="fa fa-map-marker text-primary text-xl theme-transition"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1 text-accent dark:text-dark-text theme-transition">地址</h4>
                                        <p class="text-gray-600 dark:text-gray-300 theme-transition">北京市朝阳区建国路88号</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="bg-primary/10 dark:bg-primary/20 p-3 rounded-full mr-4 theme-transition">
                                        <i class="fa fa-phone text-primary text-xl theme-transition"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1 text-accent dark:text-dark-text theme-transition">电话</h4>
                                        <p class="text-gray-600 dark:text-gray-300 theme-transition">400-123-4567</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="bg-primary/10 dark:bg-primary/20 p-3 rounded-full mr-4 theme-transition">
                                        <i class="fa fa-envelope text-primary text-xl theme-transition"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1 text-accent dark:text-dark-text theme-transition">邮箱</h4>
                                        <p class="text-gray-600 dark:text-gray-300 theme-transition">info@bookshelf.com</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="bg-primary/10 dark:bg-primary/20 p-3 rounded-full mr-4 theme-transition">
                                        <i class="fa fa-clock-o text-primary text-xl theme-transition"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium mb-1 text-accent dark:text-dark-text theme-transition">营业时间</h4>
                                        <p class="text-gray-600 dark:text-gray-300 theme-transition">周一至周日 9:00-21:00</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <h3 class="text-xl font-semibold mb-4 text-accent dark:text-dark-text theme-transition">关注我们</h3>
                                <div class="flex space-x-4">
                                    <a href="#" class="bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-custom theme-transition">
                                        <i class="fa fa-weixin"></i>
                                    </a>
                                    <a href="#" class="bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-custom theme-transition">
                                        <i class="fa fa-weibo"></i>
                                    </a>
                                    <a href="#" class="bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-custom theme-transition">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                    <a href="#" class="bg-primary/10 dark:bg-primary/20 hover:bg-primary/20 dark:hover:bg-primary/30 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-custom theme-transition">
                                        <i class="fa fa-youtube-play"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-12">
                            <img src="https://picsum.photos/id/1074/600/400" alt="我们的展厅" class="w-full h-auto rounded-lg shadow-md">
                        </div>
                    </div>
                </div>
            </div>
    </section>
    
     <!-- 页脚 -->
     <footer class="bg-accent dark:bg-dark-card text-white pt-16 pb-8 theme-transition">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-book text-secondary text-2xl theme-transition"></i>
                        <span class="text-xl font-bold text-white theme-transition">Bookshelf</span>
                    </div>
                    <p class="text-gray-300 dark:text-gray-400 mb-6 theme-transition">为书迷打造高品质的书架产品，让阅读成为生活中最美的享受。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">
                            <i class="fa fa-youtube-play text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white theme-transition">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">首页</a></li>
                        <li><a href="#products" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">产品</a></li>
                        <li><a href="#cases" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">案例</a></li>
                        <li><a href="#about" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">关于我们</a></li>
                        <li><a href="#contact" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white theme-transition">产品系列</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">现代简约书架</a></li>
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">复古实木书架</a></li>
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">转角组合书架</a></li>
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">儿童专用书架</a></li>
                        <li><a href="#" class="text-gray-300 dark:text-gray-400 hover:text-white transition-custom theme-transition">定制书架</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white theme-transition">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-secondary mt-1 mr-3 theme-transition"></i>
                            <span class="text-gray-300 dark:text-gray-400 theme-transition">北京市朝阳区建国路88号</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-phone text-secondary mt-1 mr-3 theme-transition"></i>
                            <span class="text-gray-300 dark:text-gray-400 theme-transition">400-123-4567</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-secondary mt-1 mr-3 theme-transition"></i>
                            <span class="text-gray-300 dark:text-gray-400 theme-transition">info@bookshelf.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-clock-o text-secondary mt-1 mr-3 theme-transition"></i>
                            <span class="text-gray-300 dark:text-gray-400 theme-transition">周一至周日 9:00-21:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 dark:border-gray-600 pt-8 theme-transition">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-400 dark:text-gray-500 text-sm mb-4 md:mb-0 theme-transition">© 2023 Bookshelf. 保留所有权利。</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-400 dark:text-gray-500 hover:text-white text-sm transition-custom theme-transition">隐私政策</a>
                        <a href="#" class="text-gray-400 dark:text-gray-500 hover:text-white text-sm transition-custom theme-transition">使用条款</a>
                        <a href="#" class="text-gray-400 dark:text-gray-500 hover:text-white text-sm transition-custom theme-transition">配送信息</a>
                        <a href="#" class="text-gray-400 dark:text-gray-500 hover:text-white text-sm transition-custom theme-transition">退换政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-primary hover:bg-primary-dark text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl transition-all duration-300 z-50 opacity-0 translate-y-10 hover:scale-110" style="transition: all 0.3s ease; display: none;">
        <i class="fa fa-arrow-up text-xl"></i>
    </button>

    <script src="tailwind.config.js"></script>
    <!-- 引入自定义JavaScript -->
    <script src="./js/main.js"></script>
</body>
</html>